<template>
  <div class="container">
    <div>
      <el-steps :active="stepsActive" simple finish-status="success">
        <template v-for="(item, index) in steps">
          <el-step
            class="step"
            :key="index"
            :title="item.title"
            :icon="item.icon"
          ></el-step>
        </template>
      </el-steps>
      <!-- <template v-if="stepsActive == 1">
        <el-card class="invoice-instructions" shadow="never">
          <div class="title">
            <h3><i class="el-icon-info"></i> 发票申请说明:</h3>
          </div>

          <p class="text item">
            有多个可申请开票的交易订单 / 充值订单时，请您合并开票;
          </p>
          <p class="text item">每个商户每月小于20万元的专票只能申请一次 ;</p>
          <p class="text item">
            专票大于等于20万元的申请无限制，普票无金额限制，不支持拆成多笔20万元以下的单张发票申请;
          </p>
          <p class="text item">一次最多申请50张发票。</p>
        </el-card>
      </template> -->
    </div>

    <!-- 路由占位符 -->

    <router-view class="table mt-1"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stepsActive: 0,
      steps: [
        {
          title: "勾选订单",
          icon: "el-icon-finished",
          path: "/apply",
        },
        {
          title: "开票申请",
          icon: "el-icon-edit-outline",
          path: "/edit-invoice",
        },
        // {
        //   title: "发票申请",
        //   icon: "el-icon-edit-outline",
        //   path: "/edit-invoices",
        // },
        {
          title: "发票信息",
          icon: "el-icon-thumb",
          path: "/invoice-info",
        },
        {
          title: "提交成功",
          icon: "el-icon-circle-check",
          path: "/successfully",
        },
      ],
      titles: ["勾选订单", "开票申请", "发票填写", "发票信息", "提交成功"],
    };
  },
  created() {},
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "stepChange",
  },
  methods: {
    stepChange() {
      let active = this.titles.findIndex((v) => v === this.$route.name);
      if (active > 1) {
        this.stepsActive = active - 1;
      } else {
        this.stepsActive = active;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .table {
    flex-basis: 100%;
  }
}
.invoice-instructions {
  .title {
    font-size: 1rem;
  }
  width: 100%;
  color: #22819d;
  background-color: #f2fcff;
  margin-bottom: 20px;
  margin-top: 10px;
  border: none;
  padding-left: 2rem;
}
.table {
  flex-basis: 100%;
  //height: 100px;
}
</style>
